<section id="milestones" class="section milestones">
  <div class="container">
    <div class="section__header">
      <h3 class="section__category">Open Source</h3>
      <h2 class="section__title">Getting Involved</h2>
      <p class="lead section__lead">Chat with us on <a data-track="link click" data-track-meta='{ "title": "gitter", "href": "{{ gitter }}", "position": "milestones" }' target="_blank" href="{{ gitter }}">gitter</a> and learn how you can <a  <a data-track="link click" data-track-meta='{ "title": "contribute", "href": "/docs/contrib/", "position": "milestones" }' href="/docs/contrib/">contribute!</a></p>
    </div>
    <div class="milestones__container container">
      <h3 class="milestones__container__title">
        <i class="fa fa-github-alt fa--border fa-1"></i>
        <span>Milestones</span>
      </h3>
      {% for milestone in milestones %}
        <div class="milestone row">
          <div class="col-md-6">
            <a data-track="link click" data-track-meta='{ "title": "{{ milestone.title }}", "href": "{{ milestone.html_url }}", "position": "milestones" }' class="milestone__link" target="_blank" href="{{ milestone.html_url }}">
              <h3 class="milestone__title">{{ milestone.title }}</h3>
              <i class="milestone__arrow fa fa-arrow-right" aria-hidden="true"></i>
            </a>
            <!-- <p class="milestones__description">
              {{ milestone.description }}
            </p> -->
            <p class="milestone__meta">
              <span class="milestone__meta__item">
                {% if milestone.due_on %} {{ milestone.due_on }} {% else %}No Due Date{% endif %}
              </span>
              <span class="milestone__meta__item">|</span>
              <span class="milestone__meta__item">
                {% if milestone.updated_at %} {{ milestone.updated_at }}{% else %}No update{% endif %}
              </span>
            </p>
          </div>
          <div class="col-md-6 milestone__progress">
            <progress class="progress progress-success" value="{{ milestone.complete }}" max="100" aria-describedby="progress"></progress>
            <div class="text-xs-left">
              <span class="milestone__progress__item">{{ milestone.complete }}% Complete</span>
              <span class="milestone__progress__item">{{ milestone.closed_issues }} Closed</span>
              <span class="milestone__progress__item">{{ milestone.open_issues }} Open</span>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>
